<template>
  <div class="wrap" >
    <div class="top">
      <p><router-link to="#">设为首页</router-link> | <router-link to="/login">登陆后台管理</router-link></p>
      <img src="@/assets/upfiles/top.png" />
    </div>

    <div class="menu" style="background: green">
     <div class="nav">
       <ul>
         <li :class="active==item.href ? 'menu_active' : ''" v-for="(item,index) in headerList" @click="handleClick(item.href)" :key="index" >
           <router-link :to="item.href">{{item.title}}</router-link>
         </li>
       </ul>
       <div class="clear"></div>
     </div>
    </div>
 </div>
</template>

<script>
    export default {
        name: "HeaherList",
        data(){
            return{
                active: '',
                headerList: [
                    {href: '/home/index', title: '首页'},
                    {href: '/home/gsjj', title: '公司简介'},
                    {href: '/home/course', title: '课程展示'},
                    {href: '/home/baoming', title: '我要报名'},
                    {href: '/home/zhaopin', title: '人才招聘'},
                    {href: '/home/liuyan', title: '在线留言'},
                    {href: '/geren', title: '个人中心'}
                ]
            }
        },
        mounted(){
            this.active = this.$route.path
        },
        methods: {
            handleClick(href){
                // 点击菜单
               this.active = href
            }
        }
    }
</script>

<style lang="stylus" scoped>

</style>
